import { Link, useNavigate, useParams } from "react-router-dom"

function Login() {
  // useNavigate钩子函数用于路由跳转
  const navigate = useNavigate()
  // useParams钩子函数用于接收类似vue的params传参，如 navigate('/login/888/yx')
  const params = useParams()
  const id = params.id
  const name = params.name
  return (
    <div>
      <div>我是登录页</div>
      <div>{id}-{name}</div>
      <button>
        {/* 声明式跳转(组件式跳转) */}
        <Link to="/article">跳转到文章页</Link>
      </button>
      {/* 编程式跳转，更灵活 */}
      <button onClick={() => navigate('/article?id=1&name=yx')}>点击我跳转到文章页</button>
    </div>
  )
}
export default Login
